<template>
  <div>
    <div class="goods">
      <div class="menu-wrapper">
        <ul>
          <!-- 设置一个计算属性 -->
          <li
            class="menu-item"
            v-for="(item,index) in goods"
            :key="index"
            :class="{current: index==currentIndex}"
            @click="getfoodindex(index)"
          >
            <span class="text bottom-border-1px">
              <img class="icon" :src="item.icon" v-if="item.icon">
              {{item.name}}
            </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper">
        <ul ref="foodul">
          <li class="food-list-hook" v-for="(item,i) in goods" :key="i">
            <h1 class="title">{{item.name}}</h1>
            <ul v-for="(food,index) in item.foods" :key="index" @click="getpic(food)">
              <li class="food-item bottom-border-1px">
                <div class="icon">
                  <img width="57" height="57" v-lazy="food.icon">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售 {{food.sellCount}} 份</span>
                    <span>好评率 {{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{food.price}}</span>
                  </div>
                  <div class="cartcontrol-wrapper">
                    <!-- 整个饰品对象传递 -->
                    <shopadd :food="food"/>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 食品图片详情  父调子方法this.$refs.ref.method-->
      <picinfo :food="pic" ref="foods"/>
    </div>
    <shopfooter/>
  </div>
</template>
<script>
import shopadd from "../shopadd/shopadd.vue"; //引入插件
import BScroll from "better-scroll"; //引入插件
import { mapState } from "vuex";
import picinfo from "../shoppicinfo/picinfo.vue"; //详情图
import shopfooter from "../shopfooter.vue"; //底部

export default {
  data() {
    return {
      scolly: 0, //监听右侧坐标变化
      top: [], //所有右侧的li
      food: {}, //食品对象
      pic: [] //详情图
    };
  },
  mounted() {
    //获取商品信息
    this.$store.dispatch("getShopGoods", () => {
      //数据更新后会在action内执行这个函数    //在action中做了判读如果没有数据 是不会触发这个函数的
      this.$nextTick(() => {
        this.getfoodscroll();
        this.getfoodtop();
      });
    });
  },
  computed: {
    ...mapState(["goods"]), //商品列表
    //计算分类的下标
    currentIndex() {
      let { scolly, top } = this; //
      //findIndex 查找目标索引   3个参数分别式是 1指定的值2索引3数组 、、如果找不到指定的值返回-1
      //这个方法是指定一个值 取查找他返回这个值索引    但是能等于这个值 是 >=
      let index = top.findIndex((item, index) => {
        // console.log(index);
        //现在的item存储着每一个数组的值
        return scolly >= item && scolly < top[index + 1]; //返回这个数索引
      });
      return index;
    }
  },
  methods: {
    //初始化滚动
    getfoodscroll() {
      //使用方法 加class名
      new BScroll(".menu-wrapper", {
        //默认可以点击
        click: true
      });
      this.foodscroll = new BScroll(".foods-wrapper", {
        probeType: 2, //惯性滑动不触发
        click: true
      });
      // 绑定并监听
      this.foodscroll.on("scroll", ({ x, y }) => {
        // console.log(x, y);
        this.scolly = Math.abs(y); //math.abs 绝对值
        // console.log(this.scolly);
      });
      //解决惯性不触发    //滚动结束监听
      this.foodscroll.on("scrollEnd", ({ x, y }) => {
        this.scolly = Math.abs(y);
      });
      // console.log(this.foodscroll);
    },
    //初始化top
    getfoodtop() {
      //找到所有的li
      let foodli = this.$refs.foodul.querySelectorAll(".food-list-hook");
      // console.log(foodli);
      // 初始化top
      let foodtop = [];
      let top = 0;
      foodtop.push(top);
      //计算        /
      //直接取dom元素得到的试nodelist 得到的只是dom的长度虽然根据索引可以拿到指定的元素但是要转换为数组的话就需要
      //Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组，
      Array.prototype.slice.call(foodli).forEach(element => {
        top = top + element.clientHeight; //计算每个li的高度
        // console.log(top);
        foodtop.push(top);
      });
      // console.log(Array.prototype.slice.call(foodli));
      //把数据更新到data的top
      this.top = foodtop;
    },
    //点击左侧右侧滑动
    getfoodindex(index) {
      let top = this.top[index];
      // console.log(top);
      // console.log(this.scolly);
      //scrollTo  //指定滚动坐标  第3个参数是动画时间
      this.foodscroll.scrollTo(0, -top, 300);
      // console.log(-top);
    },
    //图片详情
    getpic(food) {
      //这个组件不在循环内
      this.pic = food;
      // this.ffff=food
      // 调用子组件额方法
      this.$refs.foods.getonpic();
    }
  },
  components: {
    shopadd,
    picinfo,
    shopfooter
  }
};
</script>
<style lang="stylus">
@import '../../../common/stylus/mixins.styl';

.goods {
  display: flex;
  position: absolute;
  top: 195px;
  bottom: 46px;
  width: 100%;
  background: #fff;
  overflow: hidden;

  .menu-wrapper {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;

    .menu-item {
      display: table;
      height: 54px;
      width: 56px;
      padding: 0 12px;
      line-height: 14px;

      &.current {
        position: relative;
        z-index: 10;
        margin-top: -1px;
        background: #fff;
        color: $green;
        font-weight: 700;

        .text {
          border-none();
        }
      }

      .icon {
        display: inline-block;
        vertical-align: top;
        width: 12px;
        height: 12px;
        margin-right: 2px;
        background-size: 12px 12px;
        background-repeat: no-repeat;
      }

      .text {
        display: table-cell;
        width: 56px;
        vertical-align: middle;
        bottom-border-1px(rgba(7, 17, 27, 0.1));
        font-size: 12px;
      }
    }
  }

  .foods-wrapper {
    flex: 1;

    .title {
      padding-left: 14px;
      height: 26px;
      line-height: 26px;
      border-left: 2px solid #d9dde1;
      font-size: 12px;
      color: rgb(147, 153, 159);
      background: #f3f5f7;
    }

    .food-item {
      display: flex;
      margin: 18px;
      padding-bottom: 18px;
      bottom-border-1px(rgba(7, 17, 27, 0.1));

      &:last-child {
        border-none();
        margin-bottom: 0;
      }

      .icon {
        flex: 0 0 57px;
        margin-right: 10px;
      }

      .content {
        flex: 1;

        .name {
          margin: 2px 0 8px 0;
          height: 14px;
          line-height: 14px;
          font-size: 14px;
          color: rgb(7, 17, 27);
        }

        .desc, .extra {
          line-height: 10px;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }

        .desc {
          line-height: 12px;
          margin-bottom: 8px;
        }

        .extra {
          .count {
            margin-right: 12px;
          }
        }

        .price {
          font-weight: 700;
          line-height: 24px;

          .now {
            margin-right: 8px;
            font-size: 14px;
            color: rgb(240, 20, 20);
          }

          .old {
            text-decoration: line-through;
            font-size: 10px;
            color: rgb(147, 153, 159);
          }
        }

        .cartcontrol-wrapper {
          position: absolute;
          right: 0;
          bottom: 12px;
        }
      }
    }
  }
}
</style>
